<template>
  <div class="tidings">
    <p class="title">平台总大师{{all.zongdashi}}名，新晋大师{{all.xinjin}}名，平台总用户{{all.zongyonghu}}名</p>
    <swiper v-if="list.length" class="marquee" :options="options">
      <swiper-slide class="swiper-no-swiping" v-for="(v, i) in list" :key="'msg' + i">
        <p>{{v.msgContent}}</p>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: {
        loop: true,
        direction: "vertical",
        noSwiping: true,
        autoplay: {
          delay: 3000,
        },
      },
      list: [],
      all: {
        zongdashi: 0,
        xinjin: 0,
        zongyonghu: 0,
      },
    };
  },
  methods: {
    getMessages() {
      this.$http.fetchGet('messagesList', {
        userId: this.$store.state.userId,
        msgType: 0,
      }).then(({data = []}) => {
        console.log('滚动消息', data);
        this.list = data;
      })
    },
    getZongMaster() {
      this.$http.fetchGet('zongMaster').then(({data}) => {
        console.log('总大师数', data);
        this.all = data;
      })
    },
  },
  created() {
    this.getZongMaster();
    this.getMessages();
  }
};
</script>

<style scoped lang="less">
.tidings {
  .lh(40);
  .pt(6);
  .pb(6);
  .ml(20);
  .mr(20);
  .bri(10);
  border: 1px solid @bdColor;
  p {
    .f20;
    .pl(34);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    &::before {
      content: "";
      position: absolute;
      .px2rem(left, 12);
      top: 50%;
      transform: translateY(-50%);
      .w(8);
      .h(8);
      border: 1px solid @primary;
      border-radius: 50%;
    }
  }
  .marquee{
    .h(40);
  }
}
</style>
